<template>
  <div class="main">
    <div class="trademain" >
      <el-row :gutter="20" class="hidemenu">
        <el-col :span="3" class="hidetext">
            隐藏菜单
        </el-col>
    </el-row>
    <!-- 出证 -->
    <el-row :gutter="20">
        <el-col :span="4" class="chutext">
            藏品交易
        </el-col>     
    </el-row>

    <!-- 交易主体 -->
      <el-row :style="{'margin-top':'30px'}" v-for="(o) in line" :key=o>
        <el-col :span="3" v-for="(o, index) in tradedatas" :key="o" :offset="index > 0 ? 1 : 0">
          <el-card :body-style="{ padding: '0px','margin-top':'0px'}"  shadow="hover">
            <el-image
              @click="skiproute(o)"
              style="width: 150px; height: 120px"
              :src="baseurl+o.name"
              :fit="fit">
            </el-image>
              <div style="padding: 14px;">
              <div class="bottom clearfix">
                <span>{{o.name}}</span>
              </div>
            </div>
          </el-card>
      </el-col>
      </el-row>
      <!--分页  -->
      <el-pagination
        background
        layout="prev, pager, next"
        :total="1000">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  name:'buy',
  data(){
    return{
      currentDate: new Date(),
      tradedatas:[],
      // 表示要展示行数数
      line:1,
      baseurl:"http://hatelys.vipgz1.91tunnel.com/trade/hdfsimg/",
      fit:"cover",
    }
  },
  methods:{
    // 初始化请求
    queryassets(){
      axios({
                method:"GET",
                url:"http://hatelys.vipgz1.91tunnel.com/trade/showassets/",
                headers:{
                    'Content-Type':'application/json;charset=UTF-8',
                    'Authorization':'Bearer '+localStorage.getItem('token')
                },
            })
            .then(resp=>{ 
                if(resp.data.code == 200){
                  // 显示界面
                  this.tradedatas = resp.data.data 
                  // 函数是根据获得到的数组数量进行判定 获得数组长度小于6 则line==1  大于6小于18则line==(len/6) 其他的暂时不用写因为测试数据没那么多
                  // 进行判断
                  console.log(resp.data.data);
                   if(resp.data.data.length >= 5 ){
                    this.line = Math.ceil((resp.data.data.length)/5)
                  }
                }else{
                  console.log("请求失败");
                }
            })
    },
    skiproute(o){
      console.log("触发点击"+o.id);
      // console.log(this.$router.push());
      this.$router.push({
        path:'/ceshi/detaileddisplay',
        query: { 
          name: o.name,
          time:o.time,
          id:o.id,
          owner:o.owner,
          userid:o.userid,
          appraisedvalue:o.appraisedvalue
        },
        deep:true
      })

    }
  },
  beforeMount(){
   this.queryassets()
  },
  
}
</script>

<style>
.time {
    font-size: 13px;
    color: #999;
  }
  
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  
  .clearfix:after {
      clear: both
  }

.hidetext{
    font-size: 14px;
    font-weight: 400;
    color: rgba(116, 121, 140, 1);
    vertical-align: top;
}

.chutext{
    font-size: 18px;
    font-weight: 300;
    color: rgba(40, 45, 48, 1);
    vertical-align: top;
}
</style>